<template>
  <!--顶部 start-->
  <TopHeader/>
  <!--顶部 end-->
  <!--中间内容 start-->
  <Search/>


  <div class="baner-and-banner">
    <!-- 幻灯片start -->
    <div class="banner">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in indexBannerList" :key="item.id">
          <img style="width:370px" :src="url+'uploadFile/'+item.bannerImg" class="store-list-banner"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 幻灯片end -->
    <!--新闻资讯 start-->
    <div class="news-container">
      <div class="product-list">
        <dl>
          <dt>
            <router-link to="/edu/list">新闻资讯</router-link>
          </dt>

          <dd v-for="(item,indexNewsList) in indexNewsList.slice(0,4)">
            <router-link :to="{ path: '/edu/list', query: { id: item.id } }">
              {{ item.newsContent }}
            </router-link>
          </dd>

        </dl>
      </div>
    </div>
    <!-- </div> -->
    <!--课程分类 end-->

    <!--幻灯片 课程分类 end-->

  </div>
  <!--课程分类 搜索 幻灯片 end-->

  <!--中间内容 start-->


  <div class="lesson-container">
    <dd class="lesson-list" v-for="item in indexLessonList">
      <router-link target="_blank" class="lesson-list-box" :to="'/edu/details/'+item.id">
        <img :src="url+'uploadFile/'+item.lessonImg" class="lesson-list-cover">
        <h3>{{ item.lessonName }}</h3>
      </router-link>
    </dd>

  </div>
  <!--中间内容 end-->
  <!--底部 start-->
  <Footer/>
  <!--底部 end-->
</template>

<script setup lang="ts">
import Search from "@/views/edu/comm/Search.vue"
import TopHeader from "@/views/edu/comm/TopHeader.vue"
import Footer from "@/views/edu/comm/Footer.vue"
import {onMounted, ref} from 'vue'
import {getIndexApi, getBannerApi, getLessonApi} from "@/api/edu/index";
// 首页新闻类型
const indexNewsList = ref<object[]>([])
//轮播图类型
const indexBannerList = ref<object[]>([])
// 首页房间类型
const indexLessonList = ref<object[]>([])
// 获取课程类型
const getLesson = async () => {
  const {data} = await getLessonApi()
  indexLessonList.value = data.result.indexLessonList

  // indexLessonTypeList.value = data.result.indexLessonTypeList
  // eduTeacherList.value = data.result.eduTeacherList
}
onMounted(() => {
  getLesson()

})


// 获取新闻
const getIndex = async () => {
  const {data} = await getIndexApi()
  indexNewsList.value = data.result.indexNewsList
}
//获取轮播图
const getBanner = async () => {
  const {data} = await getBannerApi()
  indexBannerList.value = data.result.indexBannerList
}

onMounted(() => {
  getIndex()
  getBanner()

})

// 服务器路径
const url = import.meta.env.VITE_APP_BASE_API
</script>

<style scoped>

.baner-and-banner {
  display: flex;
  justify-content: space-between;
}

.banner {
  width: 50%;
}

.news-container {
  width: 50%;
}

/* 轮播图 */
.el-carousel__item h3 {
  display: flex;
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


.lesson-container {
  display: flex;
  justify-content: flex-start; /* 左对齐 */
  flex-wrap: wrap; /* 换行 */
}

.lesson-list {

  flex: 1;
  height: 240px;
  text-align: center;
  margin: 0 20px 20px 0;
  /* 间隙为20px */
  padding-top: 20px;
  box-sizing: border-box;
  width: calc((100% - 60px) / 4);
  /* 我这里一行显示4个 所以是/4  一行显示几个就除以几  */
  /* // 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整 */
  min-width: calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);

}


.lesson-list:nth-of-type(4n+4) {

  margin-right: 0;

}

.lesson-list-cover {
  height: 190px;
}
</style>
